import React from 'react';

export default class FormTest extends React.Component{
    constructor(props){
        super(props)
        this.state={
            name:"",
            sex:"1",
            city:"",
            hobby:"",
            cities:["成都","北京","上海"],
            hobbies:[
                {
                    "title":"吃饭",
                    "checked":true

                },
                {
                    "title":"睡觉",
                    "checked":true

                },
                {
                    "title":"打农药",
                    "checked":true

                }
            ],
            info:""
        }
    }
    inputName=(e)=>{
        //console.log("改变值");
        this.setState({
            name:e.target.value
        })
    }
    handleSubmit=(e)=>{
        e.preventDefault();
        console.log(this.state.name);
        console.log(this.state.sex);
        console.log(this.state.city);
        console.log(this.state.hobbies);
        console.log(this.state.info)

    }

    handleSex=(e)=>{
        this.setState({
            sex:e.target.value
        })
    }

    handleCity=(e)=>{
        this.setState({
            city:e.target.value
        })
    }

    handleHobby=(key)=>{
        let hobby = this.state.hobbies;
        hobby[key].checked=!hobby[key].checked;
        this.setState({
            hobbies:hobby
        })
    }
    handleInfo=(e)=>{
        this.setState({
            info:e.target.value
        })
    }
    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h1>React表单</h1>
                用户名：<input value={this.state.name} onChange={this.inputName}/>

                <input type="radio" value="1" checked={this.state.sex==="1"} onChange={this.handleSex}/> 男
                <input type="radio" value="2" checked={this.state.sex==="2"} onChange={this.handleSex}/> 女
                    <br/>
                    <br/>
                    请选择城市：
                    <select value={this.state.city} onChange={this.handleCity}>
                        {this.state.cities.map(function (value,key) {
                            return <option key={key}>{value}</option>
                        })}
                    </select>
                    <br/>
                    <br/>
                    兴趣爱好:{
                     this.state.hobbies.map((value,key)=> {
                         return (<div key={key}>
                                 {value.title}<input type="checkbox" checked={value.checked} onChange={this.handleHobby.bind(this,key)}/>
                         </div>)
                     })
                }

                    <br/>
                    <br/>
                    <textarea value={this.state.info} onChange={this.handleInfo}>文本内容</textarea>
                    <br/>
                    <input type="submit" defaultValue="提交"/>
                    <br/>

                </form>
            </div>
        )
    }

}